<template>
    <div>
        <pre v-note>
        动态样式
            1.为vue项目的单文件组件增加动态语言支持：less (sass sacc) stylus**
                - 组件中的 style 标签默认识别 lang="css" 语法
                - 在组件定义时，可以使用 ＜style lang="动态样式语言"＞ 描述当前样式使用何种语言
                - 单文件组件中，一个组件是可以定义多种样式语言特性
                - 以动态样式less为例 
                    ==> 全新版本安装 npm install less less-loader --save-dev
                    ==> 指定版本安装 npm install less@??? less-loader@??? --save-dev
                    ==> 首先安装最新版本，如果存在兼容问题，降版本覆盖安装
        </pre>
        <p class="title">
            <span class="main">主标题</span>
            <span class="sub">（副标题）</span>
        </p>
        <pre v-note>
        全局变量定义(以less为例)
            1. 在项目的src目录下，任选位置 定义一个 专门存放变量的 less 文件即可
                + main.js 完成less样式文件的加载，不会被作为全局less样式进行使用
                + main.js 中的less在组件加载前就已经转换为css，并定义到页面中，而转换后是不会保留less语法
            2. 通过vue内置命令 vue add style-resources-loader 安装动态语法依赖
            3. 命令执行自动在项目下生成vue.config.js，如果存在该文件，添加配置项
            4. 修改项目全局启动配置文件 vue.config.js 文件
                !! 一旦资源文件修改了存储路径，请务必修改 vue.config.js 中资源加载配置
            <code>
            const path = require("path")
            module.exports = {
                ......
                pluginOptions: {
                    'style-resources-loader': {
                        // 需要解析的 样式资源后缀
                        preProcessor: "less", 
                        // 定义语法规则
                        patterns: [
                            // 定义 less 全局样式的文件地址,以当前文件作为参考
                            path.join(__dirname,"./src/assets/less/var.less") 
                        ]
                    }
                }
            }
            </code>
        
        </pre>
        <p class="itany">测试less全局</p>
    </div>
</template>


<style lang="less" scoped>
// @blue: #007bff;
// @indigo: #6610f2;
// @purple: #6f42c1;
// @pink: #e83e8c;
// @red: #dc3545;
// @orange: #fd7e14;
// @yellow: #ffc107;
// @green: #28a745;
// @teal: #20c997;
// @cyan: #17a2b8;
// @white: #fff;
// @gray: #6c757d;
// @gray-dark: #343a40;
// @import url("@/assets/less/vars.less");
.title{
    color: @main;
    .main{
        font-size: 20px;
    }
    .sub{
        font-size: 14px;
        color: @sub;
    }
}
</style>